<template>
	<view class="tabs-wrap adup-route-bz">
		<u-form :model="fm.ps" :ref="fm.fname" :rules="rules" :error-type="['toast']">
			<view class="my-fm" :style="{'padding-top': '0rpx'}">
				<view class="f-item no-box" :style="{'padding-top': '85rpx'}">
					<view class="f-item-title"
						:style="{'position': 'fixed', 'top': '-4rpx', 'width': 'calc(100% - 50rpx)', 'padding-left': '20rpx'}">
						<label class="r-l-icon" :style="{'background': '#ff6300', 'left': '0rpx'}"></label>
						当前车辆:{{order.plateNum}}({{order.needSeats+'人'}})
						<view class="r-r-con">

							<u-button :hover-class="'none'" :custom-style="fm.sb.cancleBtnSy" @click="closeMd">
								<u-icon name="arrow-leftward" color="#ff6300"></u-icon>返回
							</u-button>
							<u-button :ripple="true" :hover-class="'none'" :custom-style="fm.sb.okBtnSty"
								:loading="fm.sb.load" @click="submitFm">
								<u-icon name="search" color="#fff"></u-icon>搜索
							</u-button>

						</view>
					</view>

					<u-form-item>
						<view style="height: 60rpx;" class="i-row">
							<view class="r-title">座位数:</view>
							<view class="r-con">
								<u-input v-model="fm.find.geSeats" :type="'number'" :input-align="'right'"
									:clearable="false" :custom-style="{'color': '#00C3CE'}" placeholder="请输入座位数" />
								<label class="i-r-text">座</label>
							</view>
						</view>
					</u-form-item>
					<u-form-item>
						<u-dropdown ref="uDropdown">
							<!-- <u-dropdown-item v-model="fm.find.plateNum" title="车牌"
								:options="options1"></u-dropdown-item> -->
							<u-dropdown-item title="车牌" v-model="fm.find.plateNum">
								<view class="slot-content" style="background-color: #FFFFFF;">
									<scroll-view scroll-y="true" style="height: 500rpx;">
										<view :style="fm.find.plateNum ==item.value?'background-color: #00C3CE;':'' " @click="options1_btn(item.value)" v-for="item in options1" :key="item.value" class=" u-content-color u-m-t-20 u-m-b-20">{{item.value}}</view>
									</scroll-view>
									
								</view>
							</u-dropdown-item>

							<u-dropdown-item v-model="fm.find.force" title="查询条件" :options="options2"></u-dropdown-item>

						</u-dropdown>
					</u-form-item>
					<!-- 
					<u-form-item>
						<view style="height: 60rpx;" class="i-row">
							<view class="r-title">车牌号:</view>
							<view class="r-con">
								<u-input v-model="fm.find.plateNum" :type="'text'" :input-align="'right'"
									:clearable="false" :custom-style="{'color': '#00C3CE'}" placeholder="请输入车牌号" />

							</view>
						</view>
					</u-form-item>
					<u-form-item>
						<view style="height: 60rpx;" class="i-row">
							<view class="r-title">强制查询:</view>
							<view class="r-con">
								<u-input @click='sheet_show = true' v-model="fm.find.forcetext" :type="'select'"
									:input-align="'right'" :clearable="false" :custom-style="{'color': '#00C3CE'}"
									placeholder="请选择是否强制查询" />

							</view>
						</view>
					</u-form-item> -->
					<view class="tabs-wrap">
						<ListTools :total="count" :sedate="{st: fm.find.stime, et: fm.find.etime}"
							@selDate="selAlSeDate">
						</ListTools>
					</view>

					<u-form-item>

						<view class="my-list"
							style="height:60vh;width: 100%;overflow: auto; min-height: 73vh;background-color: #EFEFEF; ">
							<template v-if="up_car_list.length>0">
								<view style="" class="ml-item" v-for="(it, index) in up_car_list" :key="it.id">
									<!-- <view class="i-row">
										<view class="r-title">驾驶员：</view>
										<view class="r-it">{{it.driverName?it.driverName:''}}
										</view>
									</view> -->
									<view style="height: 60rpx;" class="i-row">
										<view class="r-title">车辆：</view>
										<view class="r-it">【{{it.seats}}座】{{it.plateNum}}<text style="color: red;"
												v-if="it.isRestricted">(限号)</text>
										</view>
									</view>
									<view style="height: 60rpx;" class="i-row">
										<view class="r-title">驾驶员信息：</view>
										<view v-if='it.driverName' class="r-it">{{it.driverName}}-{{it.driverPhone}}
										</view>
										<view v-else class="r-it">无主驾
										</view>
									</view>
									<!-- 	<view class="i-row">
										<view class="r-title">座位数：</view>
										<view class="r-it"></view>
									</view> -->
									<view class="bottom">
										<view :style="{'border-color': '#f00000', 'color': '#f00000'}" class="btn"
											@click="btn_car(it)">
											确认
										</view>

									</view>

								</view>

							</template>
							<template v-if="up_car_list.length==0">
								<u-divider color="red">没有数据</u-divider>
							</template>
						</view>
					</u-form-item>



				</view>
			</view>
		</u-form>

		<u-modal show-cancel-button="true" v-model="show" :content="'确认修改车辆?'" @confirm="ok_Btn"></u-modal>
		<u-action-sheet @click="sheet_btn" :list="[{text:'非强制'},{text:'强制查询(忽略时间冲突)',}]"
			v-model="sheet_show"></u-action-sheet>
	</view>
</template>

<script>
	import ListTools from '@/components/list-tools/list-tools.vue';
	export default {
		name: "offline-vehicle-dispatch",

		components: {
			ListTools,
		},
		data() {
			return {
				options1: [],
				options2: [{
						label: '非强制',
						value: 0,
					},
					{
						label: '强制查询(忽略时间冲突)',
						value: 1,
					},
				],
				objdata: {},
				sheet_show: false,
				show: false,
				count: 0,
				id: '',
				order: '',
				page: '0',
				up_car_list: [],
				// 维修详情输入框样式
				inpBtnStyl: {
					'color': '#00C3CE',
					'padding-right': '30rpx'
				},

				// 表单对象
				fm: {
					fname: 'offlinevehicledispatch',
					sb: {
						load: false,
						text: '添加',
						okBtnSty: {
							'background-color': '#00C3CE',
							'color': '#FFFFFF',
							'margin-left': '10rpx',
							'height': '66rpx',
							'font-size': '30rpx',
							'padding': '0 20rpx',
						},
						cancleBtnSy: {
							'color': '#ff6300',
							'margin-left': '10rpx',
							'height': '66rpx',
							'font-size': '30rpx',
							'padding': '0 20rpx',
						}
					},
					// 参数对象
					ps: {
						carcompen: '',
						carName: '',
						carphone: '',

						ids: '',
						carCompanyId: '',
						carDutyUserId: '',
						driverName: '',
						driverPhone: '',
						outPrice: '',
						plateNum: '',

					},
					find: {
						stime: '',
						etime: '',
						force: "0",
						forcetext: '非强制',
						geSeats: '',
						orderNum: '',
						plateNum: '',
					},

				},


			}
		},




		onLoad(e) {
			console.log(e)
			let that = this
			that.id = e.id
			that.page = e.page
			that.orderNum = e.orderNum
			that.$u.api.getOrderDetail({
				id: e.id
			}).then(res => {
				if (res.code == 1) {
					let data = res.data
					that.order = data;
					that.fm.find.stime = data.startTime
					that.fm.find.etime = data.endTime
					that.fm.find.geSeats = data.needSeats ? data.needSeats : data.personNum + 1
					that.fm.find.orderNum = data.orderNum
					that.$u.api.findCanUseCar(that.fm.find).then(res => {
						if (res.code == 1) {
							that.up_car_list = res.data.cars
							that.count = res.data.cars.length
						}
					})
				}
			});
			that.$u.api.findCarCombo({
				page: {
					pageNum: 1,
					pageSize: 999,
				},
				plateNum: '',
			}).then(res => {
				if (res.code == 1) {
					let arr = []
					for (let i = 0; i < res.data.list.length; i++) {
						let obj = {
							label: '',
							value: "",
						}
						obj.label = res.data.list[i].plate_num
						obj.value = res.data.list[i].plate_num
						arr.push(obj)
					}
					that.options1 = arr
					console.log(that.options1)
				} else {
					U.qerror(res.msg);
				}


			})

		},
		methods: {
			options1_btn(e){
				this.fm.find.plateNum = e
				this.$refs.uDropdown.close();
				this.submitFm()
			},
			// 关闭弹框
			closeMd() {
				uni.navigateBack({
					delta: 1
				});
			},
			selAlSeDate(e) {
				// console.log('起止日期选择事件', e);

				this.fm.find.stime = e.st;
				this.fm.find.etime = e.et;


			},

			submitFm() {
				let that = this
				let ps = that.fm.find
				that.$u.api.findCanUseCar(ps).then(res => {
					if (res.code == 1) {
						that.up_car_list = res.data.cars
						that.count = res.data.cars.length
					}
				})
			},
			sheet_btn(e) {
				if (e == 0) {
					this.fm.find.force = 0;
					this.fm.find.forcetext = '非强制';
				} else if (e == 1) {
					this.fm.find.force = 1;
					this.fm.find.forcetext = '强制查询(忽略时间冲突)';
				}
			},





			btn_car(e) {
				let that = this
				that.objdata = e
				that.show = true
			},
			ok_Btn() {
				let that = this,
					U = that.U,
					FV = that.FV;
				let data = that.objdata
				let ps = {
					id: that.id,
					plateNum: data.plateNum,

				}

				console.log(ps)
				that.$u.api.changeCar(ps).then(res => {
					if (res.code == 1) {


						if (that.page == '0') {
							var tabs_page = {
								tabs1: 1,
								tabs2: 2,
							}
						} else {
							var tabs_page = {
								tabs1: 2,
								tabs2: 3,
							}
						}
						uni.setStorageSync('tabs_page', tabs_page);
						let timer = null
						uni.$u.toast(res.msg);
						clearTimeout(timer)

						timer = setTimeout(() => {
							uni.reLaunch({
								url: '/pages/tabbar/order-list/order-list'
							});
							clearTimeout(timer)
						}, 1000)
					} else {
						U.qerror(res.msg);
					}
				})

			},
		}
	}
</script>

<style lang="scss">
	.bottom {
		display: flex;

		justify-content: flex-end;
		align-items: center;

		.btn {
			line-height: 52rpx;
			padding: 0rpx 16rpx;
			border-radius: 26rpx;
			border: 2rpx solid #ff9900;
			font-size: 26rpx;
			text-align: center;
			color: #ff9900;
			;
			margin-right: 10rpx;
		}

		.more {
			align-self: center;
			flex: 1;
			margin-right: 10rpx;
		}

		.evaluate {
			color: $u-type-warning-dark;
			border-color: $u-type-warning-dark;
		}
	}
</style>